<template>
  <div id="back">
      <ul>
          <li v-for="(item,i) in colors" :key="i" :style="{background:item.color}" @click='getcolor(item)'></li>
      </ul>
  </div>
</template>
<script>
export default {
    data() {
        return {
            colors:[
                {
                    color:'red'
                },
                                {
                    color:'green'
                },
                                {
                    color:'blue'
                },
                                {
                    color:'black'
                },
                                {
                    color:'yellow'
                }
            ]
        }
    },
    methods: {
        getcolor(item){
            this.$store.commit('color',item.color)
        }
    },
}
</script>
<style lang="scss" scoped>
        ul{
            list-style: none;
            li{
                float: left;
                border-radius: 50%;
                width: 18vw;
                height: 18vw;
            }
        }
</style>